<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('车型介绍')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-car-edit" th:object="${car}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">车企：</label>
                <div class="col-sm-8">
                    <select name="companyId" class="form-control m-b" th:with="type=${@dict.getTypeCarCompany()}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">品牌：</label>
                <div class="col-sm-8">
                    <select name="brandId" class="form-control m-b" th:with="type=${@dict.getTypeCarBrand()}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">规格：</label>
                <div class="col-sm-8">
                    <select name="specId" class="form-control m-b" th:with="type=${@dict.getTypeCarSpec()}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">车辆名称：</label>
                <div class="col-sm-9">
                    <input name="carName" th:field="*{carName}" class="form-control" type="text">
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">显示顺序：</label>
                <div class="col-sm-9">
                    <input name="orderNum" th:field="*{orderNum}" class="form-control" type="text">
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">车辆状态：</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control m-b" th:with="type=${@dict.getType('sys_normal_disable')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{status}"></option>
                    </select>
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">删除标志：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}">
                        <input type="radio" th:id="${'delFlag_' + dict.dictCode}" name="delFlag" th:value="${dict.dictValue}" th:field="*{delFlag}">
                        <label th:for="${'delFlag_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            </div>
            <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">车辆介绍：</label>
                <div class="col-sm-9">
                    <div class="summernote" th:utext="*{carDesc}"></div>
                    <input id="carDesc" name="carDesc" th:field="*{carDesc}" type="hidden"/>
                </div>
            </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">大图：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="picBig" th:field="*{picBig}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">缩略图：</label>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new">
                        <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                            <img id="picSmallImg" th:src="*{picSmall}">
                        </div>
                    </div>
                    <input type="hidden" id="picSmall" name="picSmall" th:field="*{picSmall}"/>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">上传图片</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">介绍图片：</label>
                <div class="col-sm-8">
                    <div>
                        <div th:id="id_fileinput_img+${img.id}" class="fileinput fileinput-new"
                             th:each="img:${car.introductionImg}">
                            <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                <img th:src="${img.url}" class="img-rounded">
                            </div>
                            <div class="file-footer-buttons">
                                <button type="button"
                                        class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary"
                                        title="删除文件" th:onclick="FileUtils.delete([[${img.id}]])"><i
                                        class="glyphicon glyphicon-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button id="btn_fileinput-introduction" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">上传图片
                        </button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">附件：</label>
                <div class="col-sm-8">
                    <div>
                        <div th:id="id_fileinput_img+${img.id}" class="fileinput fileinput-new"
                             th:each="img:${car.annex}">
                            <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                <img th:src="${img.url}" class="img-rounded">
                            </div>
                            <div class="file-footer-buttons">
                                <button type="button"
                                        class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary"
                                        title="删除文件" th:onclick="FileUtils.delete([[${img.id}]])"><i
                                        class="glyphicon glyphicon-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button id="btn_fileinput-annex" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal3">上传图片
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        </div>
    </div>
    <div class="modal inmodal"th:id="myModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <small>上传文件</small>
                </div>
                <div class="modal-body">
                    <input id="_zls_file" type="file" name="file">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal"th:id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <small>上传文件</small>
                </div>
                <div class="modal-body">
                    <input id="fileinput-introduction" type="file" name="file" multiple>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal"th:id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <small>上传文件</small>
                </div>
                <div class="modal-body">
                    <input id="fileinput-annex" type="file" name="file" multiple>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            $('.summernote').summernote({
                lang: 'zh-CN'
            });
            FileUtils.fileinput('_zls_file', [], FileUtils.packingUploadData('[[${car.id}]]', 'car_info_picSmall'), {maxFileCount: 1});
            FileUtils.fileuploaded('_zls_file',function(event,data, previewId, index){
                console.log(event);
                console.log(data.response);
                console.log(previewId);
                console.log(index);
                if (data.response.code==0){
                    $('#picSmall').val(data.response.fileName);
                    $('#picSmallImg').attr('src',data.response.fileName);
                }
            });
            FileUtils.fileinput('fileinput-introduction',[[${car.introductionImg}]],FileUtils.packingUploadData('[[${car.id}]]','car_info'),{});
            FileUtils.fileuploaded('fileinput-introduction',function(event,data, previewId, index){
                if (data.response.code==0){
                    data=data.response||{};
                    $('#btn_fileinput-introduction').before('<div id="id_fileinput_img'+data.id+'" class="fileinput fileinput-new"><div class="fileinput-new thumbnail" style="width: 140px; height: 140px;"><img src="'+data.fileName+'" class="img-rounded"></div><div class="file-footer-buttons"><button type="button" class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary" title="删除文件" onclick="FileUtils.delete(&quot;'+data.id+'&quot;)"><i class="glyphicon glyphicon-trash"></i></button></div></div>');
                }
            });
            FileUtils.filesuccessremove('fileinput-introduction',function(event,data, previewId, index){
                console.log(event);
                console.log(data);
                console.log(previewId);
                console.log(index);
                // if (data.response.code==0){
                //     $('#picSmall').val(data.response.fileName);
                //     $('#picSmallImg').attr('src',data.response.fileName);
                // }
            });
            FileUtils.fileinput('fileinput-annex',[[${car.introductionImg}]],FileUtils.packingUploadData('[[${car.id}]]','car_info_file'),{});
            FileUtils.fileuploaded('fileinput-annex',function(event,data, previewId, index){
                if (data.response.code==0){
                    data=data.response||{};
                    $('#btn_fileinput-annex').before('<div id="id_fileinput_img'+data.id+'" class="fileinput fileinput-new"><div class="fileinput-new thumbnail" style="width: 140px; height: 140px;"><img src="'+data.fileName+'" class="img-rounded"></div><div class="file-footer-buttons"><button type="button" class="kv-file-remove btn btn-sm btn-kv btn-default btn-outline-secondary" title="删除文件" onclick="FileUtils.delete(&quot;'+data.id+'&quot;)"><i class="glyphicon glyphicon-trash"></i></button></div></div>');
                }
            });
        });

        var prefix = ctx + "car/car";
        $("#form-car-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var aHTML = $('.summernote').summernote('code');
                $('#carDesc').val(aHTML);
                $.operate.save(prefix + "/edit", $('#form-car-edit').serialize());
            }
        }
    </script>
</body>
</html>
